/** @file Toolbar.qml
@brief The Qt-Complex Standard toolbar

The standard toolbar has three buttons:

# Home (to show anything),
# Map (opens map navigation)
# Info (any kind of information.

The elements can be changed and the button associations too.
The same model should be used to build a dynamic toolbar with variable number of buttons.
The toolbar includes a positon marker (the actually selected button) to the bottom that
scroll horizontally.

@authorname \n
@licenseversion \n
@actualversion - @dateupdate

@licensenote
*/

import QtQuick 1.0
import "Theme.js" as JObj
import "Math.js" as JMath

Item {
    id: toolbar

    // Signal handlers for the toolbar buttons .
    signal button1Clicked
    signal button2Clicked
    signal button3Clicked

    focus:true
    width: objLoad.getWidth();

    // The background image covers all the toolbar buttons lenght and is always present.
    Image {
        id: toolbarBackground

        source: JObj.getTbar(objLoad.getTheme());
        clip: true
        fillMode: Image.PreserveAspectFit
        smooth: true
    }

    // Definition of the position marker object showing the current selected button
    Image {
        id: positionMarker

        source: JObj.getActiveMenuIcon(objLoad.getTheme());
        anchors.top: toolbarBackground.bottom
        anchors.topMargin: -10 // correction value
        state: "btn1"

        states: [
            State { name: "null"
                AnchorChanges { target: positionMarker; anchors.right: toolbarBackground.left } },
            State { name: "btn1"
                AnchorChanges { target: positionMarker; anchors.left: toolbarBackground.left } },
            State { name: "btn2"
                AnchorChanges { target: positionMarker; anchors.horizontalCenter: toolbarBackground.horizontalCenter } },
            State { name: "btn3"
                AnchorChanges { target: positionMarker; anchors.right: toolbarBackground.right } }
        ]
        // All transitions are managed with the same effect so wildcards are used.
        transitions:
            Transition { from:  "*"; to: "*"
            AnchorAnimation { easing.type: Easing.OutQuad; duration: 500; }
        }
    }

    SubLoader {
        id: button1

        theme: objLoad.getTheme(); obj: "ButtonToolbar";
        anchors.top: toolbarBackground.top
        anchors.topMargin: JMath.tb_MarginTop
        width: JMath.tb_buttonWidth(toolbarBackground.width)
        transform: Translate { x: JMath.tb_spacing }
        obj_string: JObj.tb_home;
        obj_icon: JObj.getTbarHome(objLoad.getTheme());
        onClicked: { toolbar.button1Clicked(); positionMarker.state = "btn1"; }
        focus:true
    }

    SubLoader {
        id: button2

        theme: objLoad.getTheme(); obj: "ButtonToolbar";
        anchors.top: toolbarBackground.top
        anchors.topMargin: JMath.tb_MarginTop
        width: JMath.tb_buttonWidth(toolbarBackground.width)
        transform: Translate { x: JMath.tb_btnKern(toolbarBackground.width) }
        obj_string: JObj.tb_map;
        obj_icon: JObj.getTbarMap(objLoad.getTheme());
        onClicked: { toolbar.button2Clicked();  positionMarker.state = "btn2"; }
        focus:true
    }

    SubLoader {
        id: button3

        theme: objLoad.getTheme(); obj: "ButtonToolbar";
        anchors.top: toolbarBackground.top
        anchors.topMargin: JMath.tb_MarginTop
        width: JMath.tb_buttonWidth(toolbarBackground.width)
        transform: Translate { x: JMath.tb_btnKern(toolbarBackground.width) * 2 }
        obj_string: JObj.tb_info;
        obj_icon: JObj.getTbarInfo(objLoad.getTheme());
        onClicked: { toolbar.button3Clicked();  positionMarker.state = "btn3"; }
        focus:true
    }
}
